<template>
  <div class="login">
    <div class="form-box" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0)">
      <div class="left">
        <img class="img" src="../../assets/images/logo.png" alt="">
      </div>
      <div class="right">
        <form class="login-form" autocomplete="off" @submit.prevent="throttleLogin">
          <div class="form-title">注册</div>
          <div class="form-item ">
            <img class="icon" src="../../assets/images/login/账号.png" alt="">
            <input type="text" v-model="form.enterpriseId" aria-placeholder="请填写手机号码" placeholder="请输入手机号码" />
          </div>
          <div class="form-item ">
            <img class="icon" src="../../assets/images/login/密码.png" alt="">
            <input type="text" v-model="form.enterpriseId" aria-placeholder="请填写8-16位的数字或字母" placeholder="请输入8-16位的数字或字母" />
          </div>
          <div class="form-item ">
            <img class="icon" src="../../assets/images/login/密码.png" alt="">
            <input type="text" v-model="form.enterpriseId" aria-placeholder="请填写密码" placeholder="请输入密码" />
          </div>
          <div class="code-container">
            <div class="form-item code-input">
              <img class="icon" src="../../assets/images/login/验证码.png" alt="">
              <input type="text" v-model="form.enterpriseId" aria-placeholder="请填写短信验证码" placeholder="请输入短信验证码" />
            </div>
            <div class="code" key="eee">发送</div>
          </div>
          <div class="check-container">
            <el-checkbox v-model="checked">我已阅读并同意《长安保险客户协议》条款</el-checkbox>
          </div>

          <button class="submit-btn" type="submit">注册</button>
          <div class="register-container">
            已有账号，去
            <router-link to="/login">
              <span>登陆!</span>
            </router-link>
          </div>
        </form>

      </div>

    </div>

  </div>
</template>

<script>
import { mapActions, mapMutations } from "vuex";
import { SET_USER_MENUS, SET_USER_PERMISSIONS } from "@/store/mutations-types";
import Login from "@/model/login";
import Util from "@/ck/util/util";

export default {
  name: "login",
  data() {
    return {
      loading: false, // 加载动画
      wait: 2000, // 2000ms之内不能重复发起请求
      throttleLogin: null, // 节流登录,
      form: {
        enterpriseId: "",
        username: "",
        password: "",
      },
      activeIndex: "1",
      checked: false,
    };
  },
  methods: {
    async login() {
      this.loading = false;
      this.$router.push("/about");
      this.loading = true;
      // const {
      //   enterpriseId,
      //   username,
      //   password
      // } = this.form
      // const form = this.form
      // try {
      //   this.loading = true
      //   const user = await Login.getToken(enterpriseId, username, password)
      //   await this.getInformation(user)
      //   this.loading = false
      //   await this.$router.push('/about')
      //   this.$message.success('登录成功')
      // } catch (e) {
      //   this.loading = false
      // }
    },
    async getInformation(user) {
      try {
        const side = await Login.getMenuBar();
        this.setUserAndState(user); //保存用户信息及更新登录状态
        this.setUserPermissions(user.ButtonJurisdiction);
        this.setUserMenus(side);
      } catch (e) {
        console.log(e);
      }
    },
    ...mapActions(["setUserAndState"]), // 将 `this.setUserAndState()` 映射为 `this.$store.dispatch('setUserAndState')`
    ...mapMutations({
      setUserPermissions: SET_USER_PERMISSIONS,
      setUserMenus: SET_USER_MENUS,
    }),
  },
  created() {
    // TODO 节流登录
    this.throttleLogin = Util._throttle(this.login, this.wait);
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background-size: auto;
  background: url("../../assets/images/login/login-ba.png") no-repeat center
    center;

  .form-box {
    display: flex;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1160px;
    height: 680px;
    background: #ffffff;
    box-shadow: 6px 9px 84px 0px rgba(111, 113, 118, 0.04);
    border-radius: 24px;

    .left {
      width: 480px;
      height: 680px;
      background: #ffffff;
      box-shadow: 6px 9px 84px 0px rgba(111, 113, 118, 0.04);
      border-radius: 24px 0 0 24px;
      background-size: auto;
      background: url("../../assets/images/login/form-ba.png") no-repeat center
        center;

      .img {
        position: absolute;
        left: 47px;
        top: 49px;
        width: 164px;
        height: auto;
      }
    }
    .right {
      width: 680px;
      height: 680px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .login-form {
      width: 400px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .form-title {
        position: relative;
        left: -20px;
        height: 24px;
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #f25d25;
      }
      .form-item {
        display: flex;
        align-items: center;
        // width: 100%;
        width: 346px;
        height: 54px;
        border: 2px solid #e5e5e5;
        box-sizing: border-box;
        margin-top: 36px;
        .icon {
          width: 20px;
          height: 20px;
          margin-left: 16px;
        }
        input {
          width: 100%;
          height: 100%;
          background: transparent;
          color: #c4c9d2;
          font-size: 18px;
          margin-left: 12px;
          box-sizing: border-box;
        }
      }
      .code-container {
        margin-top: 30px;
        display: flex;
        align-items: center;

        .code-input {
          margin-top: 0;
          width: 218px;
          height: 54px;
          border: 2px solid #e5e5e5;
        }
        .code {
          width: 120px;
          height: 50px;
          margin-left: 8px;
          color: #103f88;
          width: 96px;
          height: 50px;
          border: 1px solid #103f88;
          line-height: 50px;
        }
        .title {
          width: 42px;
          height: 14px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #909296;
          margin-left: 8px;
          cursor: pointer;
        }
      }
    }

    .submit-btn {
      width: 346px;
      height: 50px;
      background: #f76f40;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      margin-top: 32px;
      border: none;
      cursor: pointer;
    }
  }
  .check-container {
    display: flex;
    width: 346px;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    .title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
    }
  }
  .register-container {
    margin-top: 20px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    span {
      color: #f25d25ff;
      cursor: pointer;
    }
  }
}
</style>

